﻿<!Doctype html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>iframe父子窗口之间相互操作dom对象</title>  
</head>  
<body>  
	<div class="opt_btn">  
		<button onclick="getValiframeA();">父窗口获取iframeA中的值</button>  
		<button onclick="setValiframeA();">父窗口设置iframeA中的值</button>  
		<button onclick="setBgiframeA();">父窗口设置iframeA的h1标签背景色</button>  
	</div> 
	<div id="result">--操作结果--</div>  
	 
	<div class="frames">  
		<iframe id="wIframeA" name="myiframeA" src="iframeA.html" scrolling="no" frameborder="1" style="height:190px"></iframe>   
		<iframe id="wIframeB" name="myiframeB" src="iframeB.html" scrolling="no" frameborder="1" style="height:190px"></iframe>  
	</div>   
</body> 
<script type="text/javascript">  
	function getIFrameDOM(iID){  
		return document.getElementById(iID).contentWindow.document;  
	} 
	function getValiframeA(){  
		var valA = getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value;  
		document.getElementById("result").innerHTML = "获取了子窗口iframeA中输入框里的值：<span style='color:#f30'>"+valA+"</span>";  
	}  
	function setValiframeA(){  
		getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value = 'Helloweba';  
		document.getElementById("result").innerHTML = "设置了了子窗口iframeA中输入框里的值：<span style='color:#f30'>Helloweba</span>";  
	}  
	function setBgiframeA(){  
		getIFrameDOM("wIframeA").getElementById('title').style.background = "#ffc";  
	} 
</script> 
</html> 	